<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <h2>历史搜索</h2>
    <input type="text" id="input">
    <div id="search-result"></div>
    <script>
        var historys = []
        $("#input").keydown(function(e){
            
            if(e.keyCode==13&&$(this).val()!=''){
                var value = $(this).val();
                var template = `
                 <button>${value}</button>
                `
               if(!historys.includes(value)){
                    historys.unshift(value)
                    $("#search-result").prepend(template)
                    $(this).val("");
               }
               else{
                   var index = historys.indexOf(value);
                   historys.splice(index,1);
                   $("#search-result button").eq(index).remove()
                   historys.unshift(value);
                   
                   $("#search-result").prepend(template);
                   $(this).val("");
               }
                    console.log(historys)
            }
            
        })
    </script>
</body>
</html>